<template>
	<div class="container">
    	<header-compent activeName="userinfo" :agent="agent" :usertype="usertype" :is_manager="is_manager"></header-compent>
        <kf-box-compent :active_status="userInfo.active_status" :wait_active_cnt="userInfo.wait_active_cnt"></kf-box-compent>
    	<div class="page-header"><div  class="el-page-header"><div class="el-page-header__content">我的信息</div></div></div>
    	<div class="page-body">
    		<el-card class="box-card">
			  <div slot="header" class="clearfix" style="height: 30px; line-height: 30px;">
			  	<span class="w200"  style="width: 160px; float: left;">激活状态：</span>
			    <span v-if="userInfo.active_status==0" style="width: 360px;float: left; ">
			    	{{userInfo.wait_active_cnt==0?'未激活':'激活中，等待专员激活'}}
			    </span>
			    <span v-if="userInfo.active_status==-1" style="width: 360px;float: left;">
			    	已过期
			    </span>
			    <span class="ml10" v-if="userInfo.active_status==1" style="width: 360px;">已激活</span>
			    <el-button  class="ml10"  size="mini" type="primary"  v-if="(userInfo.active_status==0&&userInfo.wait_active_cnt==0) || userInfo.active_status==-1" @click="fnGetOrderPrice">激活</el-button>
			    <!--<el-button style="float: right; padding: 3px 0" type="text" v-if="userInfo.active_status==0&&userInfo.wait_active_cnt>0" @click="fnGetOrderPrice">去激活</el-button>-->
			  </div>
			  <div  class="text item flex">
			  	<span class="w200" style="width: 160px;" v-if="agent==1">姓名：</span>
			  	<span class="w200" style="width: 160px;" v-if="agent==0">用户ID：</span> 
			  	<span v-if="agent==1" style="width: 360px;"><ww-open-data type="userName" :openid="userInfo.open_userid" /></span>
			  	<span v-if="agent==0" style="width: 360px;">{{userInfo.userid}}</span>  
			  
			  </div>
			  <div  class="text item flex">
			  	<!--1.创建者 2.内部系统管理员 3.外部系统管理员 4.分级管理员 5.成员-->
			  	<span class="w200" style="width: 160px;">用户登录方式: </span>
			  	<span v-if="userInfo.usertype==1" style="width: 360px;">创建者登录</span>
			  	<span v-if="userInfo.usertype==2" style="width: 360px;">内部系统管理员登录</span>
			  	<span v-if="userInfo.usertype==3" style="width: 360px;">外部系统管理员登录</span>
			  	<span v-if="userInfo.usertype==4" style="width: 360px;">分级管理员登录</span>
			  	<span v-if="userInfo.usertype==5" style="width: 360px;">成员登录</span>      
			  </div>
			  <div  class="text item flex" v-if="agent==1">
			  	<span class="w200" style="width: 160px;">所在部门：</span>
			  	<span style="width: 360px;" v-if="userInfo && userInfo.auth_info && userInfo.auth_info.department" >
			  		<p v-for="item in userInfo.auth_info.department">
			  			<ww-open-data type="departmentName" :openid="item.id"  />
			  		</p>
			  		
			  	</span>
			  </div>
			  <div  class="text item flex">
			  	<span class="w200" style="width: 160px;">服务商企业用户ID:</span>
			  	<span style="width: 360px;">{{userInfo.open_userid}}</span>
			  	
			  </div>
			  <div  class="text item flex" v-if="userInfo.usertype<5">
			  	<span class="w200" style="width: 160px;">小程序管理权限:</span> 
			  	<span style="width: 360px;"> {{userInfo.agent == 1?'有':'没有'}}</span>  
			  	<el-button size="mini" type="primary" v-if="userInfo.agent == 0" class="ml10" @click="showHelp">去授权</el-button>
			  </div>
			</el-card>
    	</div>
    	
    	<el-dialog title="微信扫码支付" :visible.sync="dialogTableVisible" width="370px" @close="closePay">
	    	<div class="qr-code">
		        <!--<div class="header">支付</div>-->
		        <div class="subtitle">
		          {{`购买许可账号，需要支付${price}元`}}
		        </div>
		        <vue-qr
		            ref="Qrcode"
		            :text="pay_url"
		            :margin="0"
		            colorDark="#333333"
		            colorLight="#ffffff"
		            :logoSrc="icon"
		            :logoScale="1"
		            :size="160"
		          ></vue-qr>
		        <div class="tips flex justify-center a-item-center">
		          <img src="@/assets/image/wx.png" alt="" />
		          <p>使用微信扫码付款</p>
		        </div>
		    </div>
    	</el-dialog>
    	
    	<el-dialog title="如何授权应用权限?" :visible.sync="dialogHelpVisible" width="970px">
    		 <div  style="max-height: calc(100vh - 30vh - 100px);overflow-y: auto;">
	    	<div class="help_title">
		       
		        <div class="subtitle big">
                                第一步：管理员登录企业微信后台：<a href="https://work.weixin.qq.com/wework_admin/frame#profile" target="_blank">点击登录</a>
		        </div>
		     	<div class="subtitle">
		        1.管理员登录后台后，点击打开我的企业，2.打开权限管理，3.选择人员管理，4.配置管理员，5.应用与小程序权限添加“群互动”
		        </div>
		       
		        
		        <div> <img src="../assets/image/help1.png" width="900px" style="margin: 0 auto; display: block;"/></div>
		        <div class="subtitle big">
		                第二步.管理员配置应用权限：
		        </div>
		        <div class="subtitle">
		        1.管理员进入应用管理，2.选择应用，3.找到群互动打开</div>
		        <div> <img src="../assets/image/help2.png" width="900px" style="margin: 0 auto; display: block;"/></div>
		         <div class="subtitle">
		        4.应用授权方式，选择管理员授权使用，配置可见范围，选择全部5.查看授权信息，6.查看组织架构信息点击前往授权，7.管理员扫码后点击同意授权，8点击同意
		        </div>
		        <div> <img src="../assets/image/help3.png" width="900px" style="margin: 0 auto; display: block;"/></div>
		        <div> <img src="../assets/image/help4.png" width="900px" style="margin: 0 auto; display: block;"/></div>
		        <div> <img src="../assets/image/help5.png" width="900px" style="margin: 0 auto; display: block;"/></div>
		    	<div class="subtitle big">
		                第三步.授权完成后，登出并重新登录。
		        </div>
		        
		    </div>   
		      
		    </div>
		     <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogHelpVisible = false">取 消</el-button>
			    <el-button type="primary" @click="goSetting">去配置</el-button>
			 </div>
    	</el-dialog>
    	
    	<el-dialog
		  title="账号许可说明"
		  :visible.sync="dialogAccountVisible"
		  width="1000px"
		  >
		  <iframe src="https://open.work.weixin.qq.com/wwopen/common/readDocument/38829" width="960px" height="758px" frameborder="0" border="no"></iframe>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="dialogAccountVisible = false">关 闭</el-button>
		  </span>
		</el-dialog>
		
		<el-dialog
		  title="应用授权已过期"
		  :visible.sync="dialogAuthVisible"
		  width="1000px"
		  >
		  <div  style="max-height: calc(100vh - 30vh - 100px);overflow-y: auto;">
			  <div>您的应用授权已过期，需删除老应用后，重新安装授权。</div>
			  <div class="help_title">
			       
			        <div class="subtitle big">
	                                第一步：管理员登录企业微信后台，<a href="https://work.weixin.qq.com/wework_admin/frame#/apps" target="_blank">点击此处，打开应用管理并删除应用</a>
			        </div>
			     	<div class="subtitle">
			        1.打开应用管理，2.点击应用，3.打开群互动。
			        </div>
			       
			        
			        <div> <img src="../assets/image/1.png" width="900px" style="margin: 0 auto; display: block;"/></div>
			        <div class="subtitle">
			        4.删除群互动小程序,5确认删除。
			        </div>
			        <div> <img src="../assets/image/2.png" width="900px" style="margin: 0 auto; display: block;"/></div>
			        
			        <div class="subtitle big">
			                第二步.
			        </div>
			        <div class="subtitle">
			        1.点击“我已删除应用重新安装”按钮</div>
			        
			        <!--<el-button type="primary" @click="reinstallHander">我已删除应用重新安装</el-button>-->
			        
			    </div>
		    </div>
		
		  <span slot="footer" class="dialog-footer">

		    <el-button type="primary" @click="reinstallHander">我已删除应用重新安装</el-button>
		  </span>
		</el-dialog>

    <el-dialog
		  title="请升级至付费版"
      :visible.sync="dialogFreeVisible"
      :show-close="defaultValue"
      :close-on-click-modal="defaultValue"
      :close-on-press-escape="defaultValue"
		  width="1000px"
		  >
		  <div  style="max-height: calc(100vh - 30vh - 100px);overflow-y: auto;">
			  <div>您的应用目前是免费版本或者试用已过期，请先升级至付费版本。</div>
			  <div class="help_title">
			       
			        <div class="subtitle big">
	                                第一步：管理员登录企业微信后台，<a href="https://work.weixin.qq.com/wework_admin/frame#/apps" target="_blank">点击此处，打开应用管理并升级付费版</a>
			        </div>
			     	<div class="subtitle">
			        1.打开应用管理，2.点击应用，3.打开群互动。
			        </div>
			       
			        
			        <div> <img src="../assets/image/1.png" width="900px" style="margin: 0 auto; display: block;"/></div>
              <div class="subtitle">
			        4. 升级至付费版。
			        </div>
			        <div class="subtitle">
			        a)如果是试用版本已过期，点击，升级至付费版（注意，请不要再购买基础版）。
			        </div>
			        <div> <img src="../assets/image/3.png" width="900px" style="margin: 0 auto; display: block;"/></div>
              <div class="subtitle">
			        b)如果是免费版本，请删除应用，重新安装群互动，然后升级至付费版（注意，请不要再购买基础版）。
			        </div>
              <div> <img src="../assets/image/3-2.png" width="900px" style="margin: 0 auto; display: block;"/></div>
              <div> <img src="../assets/image/3-3.png" width="900px" style="margin: 0 auto; display: block;"/></div>
              <div> <img src="../assets/image/3-4.png" width="900px" style="margin: 0 auto; display: block;"/></div>
              <div> <img src="../assets/image/3-5.png" width="900px" style="margin: 0 auto; display: block;"/></div>
              <div class="subtitle">
			        5.点击确定。
			        </div>
			        <div> <img src="../assets/image/4.png" width="900px" style="margin: 0 auto; display: block;"/></div>
              <div class="subtitle">
			        5.点击提交订单并支付。
			        </div>
			        <div> <img src="../assets/image/5.png" width="900px" style="margin: 0 auto; display: block;"/></div>
			        
			        <div class="subtitle big">
			                第二步.
			        </div>
			        <div class="subtitle">
			        1.点击“我已升级付费版”刷新页面</div>
			        
			        <el-button type="primary" @click="fnGetUserInfo">点击“我已升级付费版”</el-button>
			        
			    </div>
		    </div>
		
		  <span slot="footer" class="dialog-footer">

		    <el-button type="primary" @click="fnGetUserInfo">点击“我已升级付费版”</el-button>
		  </span>
		</el-dialog>
    	
    	
    </div>
</template>

<script>
import { postUserInfo,postGetOrderPrice,postGetOrder,postCheckOrder,postCheckPermanent,getAgentPreAuthCode} from "../api/index";	
import Cookies from "js-cookie";
import HeaderCompent from "./header.vue";
import KfBoxCompent from "./kefubox.vue";
import vueQr from "vue-qr";
import icon from '@/assets/image/wepay.png'

export default {
  name: 'index',
   components: {
	HeaderCompent,vueQr,KfBoxCompent
  },
  data () {
    return {
    isSending:false,
    userInfo:{
    },
    dialogTableVisible:false,
    pay_url:'',
    price:0,
    icon:icon,
    order_id:'',
    timer:'',
    dialogHelpVisible:false,
    agent:Cookies.get('agent') || '0',
    usertype: '',
    dialogAccountVisible:false,
    dialogAuthVisible:false,
    reInstallUrl:'',
    is_manager: Cookies.get('is_manager') || 0,
    dialogFreeVisible: false,
    defaultValue:false,
    
    }
  },
  methods:{

  	goSetting(){
  		
  		location.href='https://work.weixin.qq.com/wework_admin/frame#profile';
  	},
  	showHelp(){
  		this.dialogHelpVisible = true;
  	},
  	//用户信息
   	fnGetUserInfo(){
   		if(this.isSending == true){
   			console.log('请稍等');
   			return false;
   		}
   		var params = {
       
      }
   		this.isSending = true;
   		postUserInfo(params
     ).then((res) => {
     
      	this.isSending = false;
        let { msg, code, data } = res.data;
      	
		if(code == 200){

//			data.active_status = 0;
//			data.wait_active_cnt = 0;
			this.userInfo = data;
			this.agent = data.agent;
			this.usertype = data.usertype;
      this.is_manager = data.is_manager;
			Cookies.set('agent',data.agent);
			Cookies.set('usertype',data.usertype);
      Cookies.set('is_manager',data.is_manager);
      if(!this.userInfo.has_suite_order){
        this.dialogFreeVisible = true;
        this.$message({
          type:'info',
          message:'您未升级到付费版'
        })
      }
      else{
        this.dialogFreeVisible = false;
      }
//			this.$set(this.agent,data.agent);

		}

        
        
      },reject=>{
      	 this.isSending = false;
      	 let { msg, code, data } = reject.data;
      	 if(code == 401){
      	 	Cookies.remove('token');
      	 	this.$router.push('/login')
      	 }
      	 
      });
   	},
   	//检查群抽奖是否有记录永久授权信息
   	fnCheckPermanent(){
   	
   		
   		postCheckPermanent().then((res) => {

	        let { msg, code, data } = res.data;
	        if(code == 200){
	        	
	        	
	        	
	        	if(data.check == 0){
	        		getAgentPreAuthCode().then((res)=>{
	        			let { msg, code, data } = res.data;
	        			if(code == 200){
	        				this.dialogAuthVisible = true;
	        				this.reInstallUrl = "https://open.work.weixin.qq.com/3rdapp/install?suite_id="+data.suite_id+"&pre_auth_code="+data.code+"&redirect_uri=https%3A%2F%2Fapi-master-group.chouchoujiang.com%2FQyWeixin%2Fcheck_callback_auth&state=STATE";
	        				
	        			}
	        			
	        		},reject=>{
	        			
	        		})
	        	}
	        	
	        }
	  
	    },reject=>{

	      	 let { msg, code, data } = reject.data;
	      	 if(code == 401){
	      	 	Cookies.remove('token');
	      	 	this.$router.push('/login')
	      	 }
	    });
   	},
   	deleteAppHander(){
   		
   	},
   	reinstallHander(){
   		location.href = this.reInstallUrl;
   	},
   	fnGetOrderPrice(){
   		var self = this;
   		if(this.isSending == true){
   			console.log('请稍等');
   			return false;
   		}
   		var params = {
	       amount:1,
	       months:process.env.PAY_MONTH
	    }
   		
   		this.isSending = true;
   		postGetOrderPrice(params).then((res) => {
	      	this.isSending = false;
	        let { msg, code, data } = res.data;
	        if(code == 200){
	        	 this.price = data.price/100;
	        	 this.isSending = false;
	             	const h = this.$createElement;
		        this.$msgbox({
		          customClass:'myMesbox',
		          title: '购买并激活',
		          message: h('div', {attrs:{'style':'max-height: calc(100vh - 200px);overflow-y: auto;'}},  [
		            h('div', {attrs: {'style':'margin:10px 0;line-height: 20px;display: flex;'}}, [
		              	 h('span', null, '已过90天企微官方免费试用期，需要购买【许可账号】'),
		              	 h('img', {attrs: {'src': 'https://static.ccxia.cn/Uploads/lottery/2301/63b636788afb0.png','width':'20px','style':'margin:0px 5px 0 0;cursor: pointer;'},on: {
				              click() {
								self.dialogAccountVisible = true;
//				                 self.$alert('<iframe src="https://open.work.weixin.qq.com/wwopen/common/readDocument/38829" width="960px" height="758px" frameborder="0" border="no"></iframe>', '许可账号', {
//						          dangerouslyUseHTMLString: true,
//						          customClass:'myMesbox2',
//						        });
				              }
				            }},''),
		              	 h('span', null, '才能继续使用。')
		            ]),
		             h('div', null,[
			              h('span', null, '您已选择购买'),
			              h('span', {attrs:{'style':'color:red;padding:0 5px;'}}, '1'),
			              h('span', null, '个许可，需要支付：'),
			              h('span', {attrs:{'style':'color:red;padding:0 5px;'}}, this.price),
			              h('span', null, '元。')
		             ]),
		            h('div', {attrs: {'style':'margin:10px 0;'}}, '购买后，会有专员为您激活（工作日：9点~18点）。'),
		            h('div', {attrs: {'style':'margin:50px 0 10px;color:#999999;'}}, '以下是购买的价格详细说明：'),
		            h('img',  {attrs: {'src': 'https://static.ccxia.cn/Uploads/lottery/2301/63b6641046741.jpg','width':'662px','style':'margin:5px auto;display:block;'}},''),
		            h('div', {attrs: {'style':'margin:10px 0;color:#999999;'}}, '在此价格上收取1%的手续费。'),
		            h('div', {attrs: {'style':'margin:10px 0;color:#999999;'}}, '价格计算方式，例如购买10个账号：'),
		            h('div', {attrs: {'style':'margin:10px 0;color:#999999;'}}, '1~5个账号区间5个（5元/账号/年），需支付 5x5 = 25元，6~200个账号区间5个（4元/账号/年），需支付 5x4 = 20元，共45元。 '),
		            h('div', {attrs: {'style':'margin:10px 0;color:#999999;'}}, '其中1%的手续费，45*0.01 = 0.45元。') ,
		            h('div', {attrs: {'style':'margin:10px 0;color:#999999;'}}, '共需支付45+0.45 = 45.45元 。 ') ,
		            h('div', {attrs: {'style':'margin:10px 0;color:#999999;'}}, '如有疑问，请扫码咨询客服 。 ') ,
		            h('img',  {attrs: {'src': 'https://static.ccxia.cn/Uploads/lottery/2301/63b647a7c0b7e.png','width':'100px','style':'margin:5px 0;'}},''),
		            
		            
		            

//		            h('i', { style: 'color: teal' }, 'VNode')
		          ]),
		          showCancelButton: true,
		          confirmButtonText: '去支付',
		          confirmButtonClass:'originBtn',
		          cancelButtonText: '取消'
		        }).then(action => {
		          if (action === 'confirm') {
		            	this.fnGetOrder();
		            } else {
			            this.user_list=[];
			          	this.$refs.multipleuserTable.clearSelection();
						this.$refs.multipleTable.clearSelection();
		            }
		        }).catch((err) => {
		          
		          this.$message({
		            type: 'info',
		            message: '已取消'
		          });          
		        });;
	        }
	  
	    },reject=>{
	      	 this.isSending = false;
	      	 let { msg, code, data } = reject.data;
	      	 if(code == 401){
	      	 	Cookies.remove('token');
	      	 	this.$router.push('/login')
	      	 }
	    });
   	},
   	fnGetOrder(){
   		var self = this;
   		if(this.isSending == true){
   			console.log('请稍等');
   			return false;
   		}
   		var params = {
	    	amount:1,
	    	months:process.env.PAY_MONTH,
	    	user_list:[{
	    		userid:this.userInfo.userid,
	    		open_userid:this.userInfo.open_userid
	    		}
	    	],
	    }
   		
   		this.isSending = true;
   		postGetOrder(params
     ).then((res) => {
     
      	this.isSending = false;
        let { msg, code, data } = res.data;

		if(code == 200){
			this.pay_url = data.pay_url;
			this.order_id = data.order_id;
			this.dialogTableVisible = true;
			self.timer = setInterval(()=>{
				self.checkOrder();
			},1000)
		}

        
        
      },reject=>{
      	 this.isSending = false;
      	 let { msg, code, data } = reject.data;
      	 if(code == 401){
      	 	Cookies.remove('token');
      	 	this.$router.push('/login')
      	 }
      	 
      });
   	},
   	checkOrder(){
   		var self = this;
   		if(this.isSending == true){
   			console.log('请稍等');
   			return false;
   		}
   		var params = {
	    	order_id:this.order_id
	    }
   		this.isSending = true;
   		postCheckOrder(params
     ).then((res) => {
     
      	this.isSending = false;
        let { msg, code, data } = res.data;

		if(code == 200){
			if(data.status != 1){
				clearInterval(self.timer);
				self.dialogTableVisible = false;
				
				self.fnGetUserInfo();
				if(data.status == 2){
					console.log('已付款')
				}
				else if(data.status == 3){
					console.log('付款失败')
				}
				else if(data.status == 4){
					console.log('已退款')
				}
			}
			else{
				console.log('继续check')
			}
		}

      },reject=>{
      	 this.isSending = false;
      	 clearInterval(self.timer);
		 self.dialogTableVisible = false;
      	 let { msg, code, data } = reject.data;
      	 if(code == 401){
      	 	
      	 	Cookies.remove('token');
      	 	this.$router.push('/login')
      	 }
      	 
      });
   	},
   	closePay(){
   		clearInterval(this.timer);
   	},
  },
  created(){
  	 console.log(process.env.BASE_API)
  	 console.log(process.env.PAY_MONTH)
  	  this.token = Cookies.get('token');
  	  if(!this.token){
  	  	this.$router.push('/login')
  	  }
  	  else{
  	  	this.fnGetUserInfo();
	  	this.fnCheckPermanent();

  	  }
	
  },
  mounted(){

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  type="text/scss" lang="scss" >

	.item{
		margin: 20px auto;
		min-height: 30px;
		line-height: 30px;
	}
	.qr-code {
	  text-align: center;
	  .subtitle {
	    padding: 15px 0 30px;
	  }
	  .tips {
	    padding-top: 25px;
	    img{
	    	margin-right: 10px;
	    }
	  }
	}
	.help_title {
	  text-align: left;
	  .header{
	  	text-align: center;
	  	font-size: 20px;
		color: #333333;
	  }
	  .subtitle {
	    padding: 10px;
	     &.big{
	    	font-size: 16px;
	    	font-weight: bold;
	    	margin-top: 20px;
	    }
	  }
	  .tips {
	    padding-top: 25px;
	    img{
	    	margin-right: 10px;
	    }
	  }
	}
</style>
